<template>
  <div>
    <span>抽屉</span>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      @closed="aaa"
      :modal="false"
    >
      <div class="jiantou"></div>

      <div class="qqq">
        <div class="www"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawer: true
    }
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    isOpen(newVal, oldVal) {
      if (newVal == true) {
        this.drawer = true
      } else if (newVal == false) {
        this.drawer = false
      }
    }
  },
  methods: {
    aaa() {
      this.$emit('hanldeclose', this.drawer)
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.jiantou {
  width: 50px;
  height: 50px;
  border: 1px solid red;

  position: relative;
  top: 10px;
  left: -25px;
  z-index: 9999;
}

.qqq {
  width: 200px;
  height: 200px;
  border: 1px solid rgb(104, 48, 48);
  background-color: aqua;

  position: relative;
  top: 100px;
  left: 50px;

  z-index: auto;
}

.www {
  width: 50px;
  height: 50px;
  border: 1px solid red;

  background-color: rgb(66, 22, 168);

  position: absolute;
  top: 10px;
  left: -25px;

  z-index: 0;
}
</style>
